<template>
	<view>

		

		<view class="inforDetail_box">
			

			<view class="inforSeller_con">
				<!-- <view class="sellerGoods">
					<view class="goodsPic">
						<image :src="inforDetail.img_url" mode="widthFix"></image>
					</view>
				
				</view> -->
				<view class="sellerCon">
					<view class="sellerInfor">
						
						
						<view class="sellerLi sellerLiTitle">
							<view class="sellerName">{{inforDetail.name}}</view>
						</view>
						<view class="sellerLi sellerLiTime">
							<view class="sellerName">信息发布于{{inforDetail.add_time_str}}</view>
						</view>
						
						<!-- 联系方式 -->
						<view class="mobileBox">
							<view class="loginIcon">
								<image src="../../static/logo.png" mode=""></image>
							</view>
							
							<view class="mobileMain">
								{{inforDetail.mobile}}
								<text v-if="inforDetail.is_check==1">信息已核实</text>
								<text v-if="inforDetail.is_check==0">该信息已帮助了{{inforDetail.look_num}}人</text>
							</view>
							<view class="callBtn" @click="callMobile">
								<u-icon name="phone-fill" color="#2979ff" size="28"></u-icon>
								拨打电话
							</view>
						</view>
						
						
						
						<!-- 消息 -->
						<view class="messageLi">
							<view class="messageTitle">
								经营范围
							</view>
							<view class="messageContent messageContent2">
								{{inforDetail.about}}
							</view>
						</view>
						
						
						<view class="messageLi">
							<view class="messageTitle">
								位置信息
								<view class="messageDaohang" @click="mapClick">
									<image src="../static/daohang.png" mode=""></image>
									导航到这里
								</view>
							</view>
							<view class="messageContent">
								<view class="messageAddress">
									{{inforDetail.address}}
								</view>
								<map style="width: 100%; height: 300rpx;" :latitude="latitude" :longitude="longitude"
									:markers="covers" @tap="mapClick">
								</map>
							</view>
						</view>
						
						
						<view class="sellerTips" >
							<u-icon name="info-circle" color="#FF0000" size="28"></u-icon>
							<text>此条信息来自用户上报，如无法联系到商家，可以上报给平台。</text>
						</view>
						
						
						
					</view>
				</view>
				
				
			</view>
			
		
		</view>

		<!-- 底部 -->
		<view class="inforBtm_box">
			<view class="inforHandle" @click="goPage('/pagesOther/device/report?id='+ id)">
				<view class="handleIcon">
					<image src="../static/complainBtn.png" mode=""></image>
				</view>
				<view class="handleText">举报</view>
			</view>
			<view class="inforHandle" @click="shareShow = true">
				<view class="handleIcon">
					<image src="../static/shareBtn.png" mode=""></image>
				</view>
				<view class="handleText">分享</view>
			</view>

			
			<view class="inforContact"  @click="callMobile">
				<u-icon name="phone" color="#fff" size="32"></u-icon>
				<text>联系店家</text>
			</view>
		</view>

	
		

	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				// 分页
				pages: 1,
				limit: 10,
				last_page: 0,

				// 加载更多
				loadStatus: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '上拉或点击加载更多',
					loading: '努力加载中',
					nomore: '没有更多了'
				},

				// 爆点配置信息
				inforConfig: {},

				// 最新爆点列表
				lastList: {},

				id: 50,
				// 爆点详情
				inforDetail: {},

				// 地图
				//id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				covers: [],

				// 图片列表
				img_array: [],

				// 评论列表
				commentList: [],
				commentTotal: '',

				// 默认用户信息
				

				// 分享信息
				shareInfor: {},

				// 分享弹窗
				shareShow: false,
				
				// 分享标识
				shareFlag: false,
				
				shareTitle:'',
				shareImgs:'',
			}
		},
		onLoad(option) {
			
			console.log(option);
			var _this = this;
			if (option.id) {
				_this.id = option.id;
			}
			
		},
		onReady() {
			var _this = this;
			_this.pages = 1;
			// _this.getInforConfig();
			// _this.getLastList();
			_this.getInforDetail();
			// _this.getCommentList();
			// _this.getShareInfor();
		},
		onShow: function() {

		},
		onReachBottom() {
			var _this = this;
			_this.loadmore();
		},
		onShareAppMessage(res) {
			let _this = this;
			return {
				title: _this.shareTitle,
				imageUrl: _this.shareImgs,
				path: '/package/infor/inforDetail/inforDetail?id=' + _this.id +
					'&shareFlag=true',
			}
		},
		methods: {
			// 返回到首页
			backIndex() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			
			
			// 更新帮助人数
			async updateLookClick() {
				var _this = this;
				_this.$u.get('/api/device.index/updateLook', {
					id: _this.id,
				}).then(res => {
					uni.hideLoading();
				}).catch(res => {
					console.log(res);
				})
			},
			
		


			// 获取爆点详情
			async getInforDetail() {
				var _this = this;
				_this.$u.get('/api/device.index/getDetail', {
					id: _this.id,
				}).then(res => {
					uni.hideLoading();
					console.log("==获取爆点详情==");
					console.log(res);
					_this.inforDetail = res.data;
					
					
					// 经纬度
					_this.longitude = parseFloat(res.data.lng);
					_this.latitude = parseFloat(res.data.lat);
					
					// 地图
					_this.covers = [{
						longitude: parseFloat(res.data.lng),
						latitude: parseFloat(res.data.lat),
						iconPath: '/static/location.png',
						width: 30,
						height: 30,
					}];
				}).catch(res => {
					console.log(res);
				})
			},

			// 获取评论列表
			getCommentList() {
				let _this = this;
				_this.$u.get('/api/extend.comment/getList', {
					pages: _this.pages,
					limit: _this.limit,
					id: _this.id,
					type: '8',
				}).then(res => {
					uni.hideLoading();
					console.log("==获取评论列表==");
					console.log(res);
					var commentList = _this.commentList;
					if (_this.pages == 1) {
						commentList = [];
					}
					_this.commentList = commentList.concat(res.data);
					_this.commentTotal = res.extend.total;

					// 分页状态更新
					_this.last_page = res.extend.last_page;
					if (_this.pages >= _this.last_page) _this.loadStatus = 'nomore';
					else _this.loadStatus = 'loadmore';
				}).catch(res => {
					console.log(res);
				})
			},

			// 点击加载更多
			loadmore() {
				var _this = this;
				if (_this.pages >= _this.last_page) return;
				_this.loadStatus = 'loading';
				_this.pages++;
				setTimeout(() => {
					if (_this.pages >= _this.last_page) _this.loadStatus = 'nomore';
					else _this.loadStatus = 'loading';
					_this.getCommentList();
				}, 2000)
			},

			// 预览爆点图片
			previewImg(src) {
				let _this = this;
				var current = src;
				var imgList = _this.img_array;
				var imagesUrl = [];
				for (var i = 0; i < imgList.length; i++) {
					imagesUrl[i] = imgList[i].url;
				}
				// console.log(imagesUrl)

				uni.previewImage({
					current: current,
					urls: imagesUrl
				})
			},

			// 预览评论图片
			previewCommentImg(src, index) {
				let _this = this;
				var current = src;
				var imgList = _this.commentList[index].img_list;

				uni.previewImage({
					current: current,
					urls: imgList
				})
			},

			// 收藏
			collectClick() {
				let _this = this;
				_this.$u.post('/api/extend.collect/add_do', {
					collect_type: '3',
					collect_to_id: _this.id,
				}).then(res => {
					uni.hideLoading();
					console.log("==收藏结果==");
					console.log(res);
					uni.showToast({
						title: res.msg,
						duration: 2000
					});
					setTimeout(function() {
						_this.getInforDetail();
					}, 1000);
				}).catch(res => {
					console.log(res);
				})
			},

			// 拨打电话
			callMobile() {
				let _this = this;
				let res = uni.getSystemInfoSync();
				
				
				uni.makePhoneCall({
					phoneNumber: _this.inforDetail.mobile,
					success(e){
						console.log('============')
						uni.showModal({
							title:'信息调查',
							content:'您是否联系上商家？',
							cancelText:'未联系上',
							confirmText:'已联系',
							success(e){
								console.log(e)
								if(e.confirm){
									_this.updateLookClick();
								}else{
									_this.goPage('/pages/device/report?id='+ _this.id)
								}
							}
						})
					}
				});
				
				
				// if (res.platform == 'ios') {
				// 	uni.makePhoneCall({
				// 		phoneNumber: _this.inforDetail.mobile
				// 	});
				// } else {
				// 	uni.showActionSheet({
				// 		itemList: [_this.inforDetail.mobile, '呼叫'],
				// 		success: function(res) {
				// 			console.log(res);
				// 			if (res.tapIndex == 1) {
				// 				uni.makePhoneCall({
				// 					phoneNumber: _this.inforDetail.mobile
				// 				})
				// 			}
				// 		}
				// 	})
				// }
			},

			// 地图导航
			mapClick() {
				uni.openLocation({
					name: this.inforDetail.province + this.inforDetail.city + this.inforDetail.area,
					address: this.inforDetail.address,
					latitude: parseFloat(this.inforDetail.lat),
					longitude: parseFloat(this.inforDetail.lng),
					success: function() {
						console.log('success');
					}
				});
			},

			// 页面跳转
			goPage(url) {
				uni.navigateTo({
					url: url,
				})
			},

			// 支付
			payInfor() {
				let _this = this;

				let platform = uni.getSystemInfoSync().platform;
				if (!(platform == 'android' || platform == 'ios')) {
					uni.showModal({
						content: '小程序暂不支持查看联系方式，请下载APP',
						title: '提示',
						confirmText: '去下载',
						cancelText: '暂不下载',
						success: function(e) {
							if (e.confirm) {
								uni.navigateTo({
									url: '/pages/agreement/agreement?id=4'
								})
							}
						}
					})
					return;
				}
				/**
				 * 设备终端类型
				 */
				var way = '';
				// #ifdef MP-WEIXIN
				way = 'wxapp';
				// #endif	
				//#ifdef APP-PLUS
				way = 'app';
				//#endif

				_this.$u.post('/api/information.order/add_do', {
					id: _this.id,
					way: way,
				}).then(res => {
					uni.hideLoading();
					console.log("==支付结果==");
					console.log(res);
					pay(res, _this, function() {
						uni.showToast({
							title: res.msg,
							duration: 2000
						});
						setTimeout(function() {
							_this.getInforDetail();
						}, 1000);
					}, function() {

					});
				}).catch(res => {
					console.log(res);
				})
			},

			// App分享为微信小程序（App中分享一个内容到微信好友，对方微信中呈现的是一个小程序卡片）
	
			appShare() {
				var _this = this;
				uni.share({
					provider: 'weixin',
					scene: "WXSceneSession",
					type: 5,
					imageUrl: _this.shareImgs,
					title: _this.shareTitle,
					miniProgram: {
						id: getApp().globalData.originalId,
						path: '/pages/index/index?user_id=' + _this.userInfor.id + '&shareFlag=true',
						type: 0,
						webUrl: this.app_url
					},
					success: res => {
						console.log(JSON.stringify(res));
					}
				});
			},

			// 分享到朋友圈
			quanShare() {
				var _this = this;
				uni.share({
					provider: 'weixin',
					scene: "WXSceneTimeline",
					type: 0,
					imageUrl: _this.shareInfor.wxicon,
					title: _this.shareTitle,
					href: _this.shareInfor.baourl,
					summary: "记工本，数据永久保存！",
					// miniProgram: {
					// 	id: getApp().globalData.originalId,
					// 	path: '/pages/index/index?user_id=' + _this.userInfor.id,
					// 	type: 0,
					// 	webUrl: this.app_url
					// },
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
				});
			},

		}
	}
</script>
<style>
	page{
		background-color: #fff!important;
	}
</style>
<style scoped lang="scss">
	
	button {
		padding: 0;
		margin: 0;
		background: transparent;
		height: 100%;
		line-height: inherit;
		font-size: inherit;
	}

	button::after {
		border: 0;
		background-color: none;
	}

	// 详情
	.inforDetail_box {
		padding-bottom: 120rpx;
		overflow: hidden;
		padding: 0 20rpx;
		background-color: #fff;
	}

	.inforRead_con {
		padding: 20rpx 30rpx;
		background-color: #fff;
		border-radius: 10rpx;
		overflow: hidden;
		margin: 20rpx 0;
		display: flex;
		align-items: center;
	}

	.readAvatar {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		overflow: hidden;
	}

	.readDesc {
		flex: 2;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 30rpx;
		color: #666;
		margin-left: 20rpx;
	}

	.inforSeller_con {
		padding: 10rpx;
		background-color: #fff;
		border-radius: 10rpx;
		overflow: hidden;
		margin: 20rpx 0;
		position: relative;
	}

	.sellerGoods {
		overflow: hidden;
		width: 100%;
		justify-content: space-between;
		align-items: center;
		border-radius: 10rpx;
	}

	
	.goodsPic{
		width: 100%;
		max-height: 500rpx;
		
	}
	.goodsPic image{
		width: 100%;
	}

	.goodsCon {
		width: 560rpx;
		height: 80rpx;
		margin-left: 20rpx;
		overflow: hidden;
		display: flex;
		flex-wrap: wrap;
		align-content: space-between;
	}

	.goodsCon .goodsName {
		width: 100%;
		font-size: 30rpx;
		color: #666;
	}

	.goodsCon .goodsDate {
		width: 100%;
		font-size: 24rpx;
		color: #666;
	}

	.sellerStatus {
		width: 114rpx;
		height: 114rpx;
		position: absolute;
		right: 30rpx;
		top: 50rpx;
	}

	.sellerCon {
		overflow: hidden;
	}

	.sellerInfor {
		overflow: hidden;
	}

	.sellerLi {
		width: 100%;
		font-size: 28rpx;
		overflow: hidden;
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.sellerLabel {
		color: #666;
	}

	.sellerLi .sellerName {
		flex: 2;
		color: #666;
		margin-right: 20rpx;
	}
	
	.sellerLiTitle .sellerName {
		font-size: 32rpx;
		font-weight: bold;
		padding-top: 10rpx;
		color: #000;
	}

	.sellerContact {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: #fff;
		font-size: 28rpx;
		font-weight: bold;
		color: #eee;
		border: 1rpx solid #eee;
		border-radius: 10rpx;
		overflow: hidden;
		margin-bottom: 20rpx;
	}

	.sellerTips {
		color: $uni-color-error;
		overflow: hidden;
		padding: 30rpx 0;
	}

	.sellerTips text {
		font-size: 24rpx;
		margin-left: 10rpx;
		line-height: 40rpx;
	}
	.mapXian{
		width: 100%;
		border-top:2rpx solid #eee;
		height: 60rpx;
		line-height: 60rpx;
		padding-top: 10rpx;
	}
	.sellerMap {
		overflow: hidden;
		margin: 20rpx 0;
		border: 2rpx solid #e2e2e2;
		border-radius: 10rpx;

	}

	// 详情
	.inforDetail_con {
		font-size: 28rpx;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 10rpx;
		overflow: hidden;
		margin: 20rpx 0;
	}

	.inforTit {
		font-weight: bold;
	}

	.inforRichtext {
		padding: 20rpx 0;
	}

	.inforPic {
		overflow: hidden;
	}

	.inforPic image {
		width: 150rpx;
		height: 150rpx;
		margin-right: 17rpx;
	}

	.inforPic image:nth-child(4n) {
		margin-right: 0;
	}

	// 评价
	.inforComment_con {
		background-color: #fff;
		border-radius: 10rpx;
		overflow: hidden;
		margin-bottom: 118rpx;
	}

	.commentHead {
		padding: 30rpx;
		border-bottom: 1rpx solid #eee;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.commentTit {
		font-size: 28rpx;
		color: #666;
	}

	.commentMore {
		font-size: 22rpx;
		color: #666;
	}

	.commentList {
		padding: 0 30rpx;
		overflow: hidden;
	}

	.commentItem {
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
		overflow: hidden;
	}

	.commentUser {
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.userAvatar {
		width: 40rpx;
		height: 40rpx;
	}

	.userName {
		flex: 2;
		font-size: 22rpx;
		color: #666;
		text-align: left;
		margin: 0 20rpx;
	}

	.userDate {
		font-size: 22rpx;
		color: #666;
	}

	.commentDesc {
		padding-top: 20rpx;
		font-size: 28rpx;
		color: #666;
		overflow: hidden;
	}

	.commentPic {
		padding-top: 5rpx;
		overflow: hidden;
	}

	.commentPic image {
		float: left;
		width: 80rpx;
		height: 80rpx;
		margin-right: 15rpx;
		margin-top: 15rpx;
	}

	.commentPic image:nth-child(7n) {
		margin-right: 0;
	}

	// 底部
	.inforBtm_box {
		width: 100%;
		padding: 20rpx 30rpx;
		background-color: #fff;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		bottom: 0;
		border-top: 2rpx solid #e2e2e2;
	}

	.inforHandle {
		text-align: center;
	}

	.handleIcon {
		width: 100%;
	}

	.handleIcon image {
		width: 34rpx;
		height: 34rpx;
	}

	.handleText {
		width: 100%;
		font-size: 24rpx;
		color: #666;
		margin-top: 6rpx;
	}

	.inforContact {
		width: 430rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 30rpx;
		color: #fff;
		background: linear-gradient(45deg, #36a2ff 0%, #0088fd 100%);
		border-radius: 14rpx;
		overflow: hidden;
	}

	.inforContact text {
		margin-left: 20rpx;
	}

	/* 分享弹窗 */
	.shareBox {
		padding: 40rpx 60rpx;
	}

	.shareCon {
		padding: 40rpx 0;
		overflow: hidden;
		display: flex;
		justify-content: space-around;
	}

	.shareItem {
		overflow: hidden;
	}

	.shareItem .shareIcon {
		width: 100%;
		text-align: center;
	}

	.shareItem .shareIcon image {
		width: 88rpx;
		height: 88rpx;
	}

	.shareItem .shareType {
		width: 100%;
		font-size: 24rpx;
		color: #333333;
		text-align: center;
		margin-top: 20rpx;
	}

	.sharePost {
		overflow: hidden;
	}

	.sharePost .shareCancel {
		width: 100%;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		color: #A2A2A2;
		font-size: 26rpx;
		background: #efefef;
		border-radius: 36rpx;
		overflow: hidden;
	}
	
	
	.mobileBox{
		margin-top: 20rpx;
		border-bottom: 2rpx solid #e2e2e2;
		padding-bottom: 30rpx;
		overflow: hidden;
	}
	.loginIcon{
		width: 100rpx;
		height: 100rpx;
		border-radius: 10rpx;
		border: 2rpx solid #005ca6;
		border-radius: 10rpx;
		overflow: hidden;
		float: left;
		
	}
	.loginIcon image{
		width: 100%;
		height: 100%;
	}
	.mobileMain{
		font-size: 30rpx;
		margin-left: 20rpx;
		padding-top: 10rpx;
		float: left;
	}
	.mobileMain text{
		display: block;
		font-size: 24rpx;
		padding-top: 20rpx;
		color: #999;
	}
	.callBtn{
		float: right;
		background-color: #cae6ff;
		color:#0088fe;
		width: 200rpx;
		height: 70rpx;
		text-align: center;
		line-height: 70rpx;
		border-radius: 10rpx;
		margin-top: 20rpx;
	}
	
	.messageLi{
		margin-top: 20rpx;
		overflow: hidden;
	}
	.messageTitle{
		color: #999999;
		font-size: 28rpx;
		font-weight: bold;
		height: 60rpx;
		line-height: 60rpx;
	}
	.messageContent{
		margin-top: 20rpx;
		border: 2rpx solid #f2f2f2;
		border-radius: 10rpx;
		padding: 20rpx;
	}
	
	// .messageContent2{
	// 	padding: 20rpx  0;
		
	// }
	.messageAddress{
		padding-bottom: 20rpx;
	}
	.messageDaohang{
		float: right;
		color: #333;
		margin-right: 20rpx;
	}
	.messageDaohang image{
		width: 50rpx;
		height: 50rpx;
		margin-right: 10rpx;
		vertical-align: middle;
	}
</style>
